import React, { Component } from 'react'
import Han from "../../components"
import {connect} from 'react-redux'
import {setRecentTrip} from '../../store/actions/healthAction'
const {Header,Button,Input} = Han


export default connect(store=>{
    return {

    }
},dispatch=>{
    return {
        changeRecentTrip(value){
            dispatch(setRecentTrip(value))
        }
    }
})(class trip extends Component {

    // 编辑还是添加
    initPropsData=()=>{
        return this.props.location.state?this.props.location.state:{
            tripId:"",
            startPlace:"",
            startDate:"",
            endPlace:"",
            endDate:"",
            transportation:"aircraft",
            seatNumber:"",
            stayDays:"",
            stayPlace:""
        }
    }
    state= {
        ...this.initPropsData(),
        transType :{Railway:"铁路",aircraft:"飞机",selfPropelled:"自驾",ship:"船",other:"其他"}

    }

    submit = ()=>{
        const {tripId,startPlace,startDate,endPlace,endDate,transportation,seatNumber,stayDays,stayPlace} = this.state
    
        if(!/^\d{4}-\d{2}-\d{2}$/.test(startDate)) return alert('时间格式不合法')
        
        if(!/^\d{4}-\d{2}-\d{2}$/.test(endDate)) return alert('时间格式不合法')



        let submitData = {
            tripId:tripId===""?"T"+new Date().getTime():tripId,
            startPlace,
            startDate,
            endPlace,
            endDate,
            transportation,
            seatNumber,
            stayDays,
            stayPlace
        }

        // 向仓库添加或修改行程
        this.props.changeRecentTrip(submitData)
        
        // 跳转到健康上报页面
       
        this.props.history.push('/healthsubmit')

    }
    render() {
        const {startPlace,startDate,endPlace,endDate,transportation,seatNumber,stayDays,stayPlace,transType} = this.state
        return (
            <div>
                  <Header title="行程添加"/>

                  <div className="han_type">行程信息</div>

                  <Input label="出发城市" value={startPlace} change={startPlace=>this.setState({startPlace})}/>
                  <Input label="出发时间" value={startDate} change={startDate=>this.setState({startDate})}/>
                 
                  <Input label="到达城市" value={endPlace} change={endPlace=>this.setState({endPlace})}/>
                  <Input label="到达时间" value={endDate} change={endDate=>this.setState({endDate})}/>
                 
                  <div className="han_type">出行方式</div>
                    <div className="han_check_out">
                        {
                            Object.keys(transType).map(item=>{
                                return <div className="han_check" key={item}>
                                    <input type="radio" name="transType" value={item} checked={transportation===item}  onChange={e=>this.setState({transportation:e.target.value})}/>
                                    <span>{transType[item]}</span>
                                </div>
                            })
                        }
                    </div>

                  <Input label="座位号" value={seatNumber} change={seatNumber=>this.setState({seatNumber})}/>
                  <Input label="停留天数" value={stayDays} change={stayDays=>this.setState({stayDays})}/>
                  <Input label="停留城市" value={stayPlace} change={stayPlace=>this.setState({stayPlace})}/>


                  <Button text="提交" submit={this.submit} />
            </div>
        )
    }
})
